<div class="overlay-modal" id="keyboard-shortcuts" tabindex="-1" role="dialog"
  aria-label="{{t 'Keyboard shortcuts' }}">
    <div class="overlay-scroll-container" data-simplebar data-simplebar-auto-hide="false">
        <div>
            <table class="hotkeys_table table table-striped table-bordered">
                <thead>
                    <tr>
                        <th colspan="2">{{t "The basics" }}</th>
                    </tr>
                </thead>
                <tr>
                    <td class="definition">{{t 'Reply to message' }}</td>
                    <td><span class="hotkey"><kbd>Enter</kbd> or <kbd>R</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{{t 'New stream message' }}</td>
                    <td><span class="hotkey"><kbd>C</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{{t 'New direct message' }}</td>
                    <td><span class="hotkey"><kbd>X</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{{t 'Cancel compose and save draft' }}</td>
                    <td><span class="hotkey"><kbd>Esc</kbd> or <kbd>Ctrl</kbd> + <kbd>[</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{{t 'View drafts' }}</td>
                    <td><span class="hotkey"><kbd>D</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{{t 'Next message' }}</td>
                    <td><span class="hotkey"><kbd class="arrow-key">↓</kbd> or <kbd>J</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{{t 'Last message' }}</td>
                    <td><span class="hotkey"><kbd>End</kbd> or <kbd>Shift</kbd> + <kbd>G</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{{t 'Next unread topic' }}</td>
                    <td><span class="hotkey"><kbd>N</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{{t 'Next unread followed topic' }}</td>
                    <td><span class="hotkey"><kbd>Shift</kbd> + <kbd>N</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{{t 'Next unread direct message' }}</td>
                    <td><span class="hotkey"><kbd>P</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{{t 'Initiate a search' }}</td>
                    <td><span class="hotkey"><kbd>Ctrl</kbd> + <kbd>K</kbd> or <kbd>/</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{{t 'Show keyboard shortcuts' }}</td>
                    <td><span class="hotkey"><kbd>?</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{{t 'Go to home view' }}</td>
                    <td><span class="hotkey"><kbd>Ctrl</kbd> + <kbd>[</kbd><span id="go-to-home-view-hotkey-help"> or <kbd>Esc</kbd></span></span></td>
                </tr>
            </table>
        </div>
        <div>
            <table class="hotkeys_table table table-striped table-bordered">
                <thead>
                    <tr>
                        <th colspan="2">{{t 'Navigation' }}</th>
                    </tr>
                </thead>
                <tr>
                    <td class="definition">{{t 'Initiate a search' }}</td>
                    <td><span class="hotkey"><kbd>Ctrl</kbd> + <kbd>K</kbd> or <kbd>/</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{{t 'Filter streams' }}</td>
                    <td><span class="hotkey"><kbd>Q</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{{t 'Search people' }}</td>
                    <td><span class="hotkey"><kbd>W</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{{t 'Previous message' }}</td>
                    <td><span class="hotkey"><kbd class="arrow-key">↑</kbd> or <kbd>K</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{{t 'Next message' }}</td>
                    <td><span class="hotkey"><kbd class="arrow-key">↓</kbd> or <kbd>J</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{{t 'Scroll up' }}</td>
                    <td><span class="hotkey"><kbd>PgUp</kbd> or <kbd>Shift</kbd> + <kbd>K</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{{t 'Scroll down' }}</td>
                    <td><span class="hotkey"><kbd>PgDn</kbd> or <kbd>Shift</kbd> + <kbd>J</kbd> or <kbd>Space</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{{t 'Last message' }}</td>
                    <td><span class="hotkey"><kbd>End</kbd> or <kbd>Shift</kbd> + <kbd>G</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{{t 'First message' }}</td>
                    <td><span class="hotkey"><kbd>Home</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{{t 'Go back through viewing history' }}</td>
                    <td><span class="hotkey"><kbd>Alt</kbd> + <kbd class="arrow-key">←</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{{t 'Go forward through viewing history' }}</td>
                    <td><span class="hotkey"><kbd>Alt</kbd> + <kbd class="arrow-key">→</kbd></span></td>
                </tr>
            </table>
        </div>
        <div>
            <table class="hotkeys_table table table-striped table-bordered">
                <thead>
                    <tr>
                        <th colspan="2">{{t 'Composing messages' }}</th>
                    </tr>
                </thead>
                <tr>
                    <td class="definition">{{t 'New stream message' }}</td>
                    <td><span class="hotkey"><kbd>C</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{{t 'New direct message' }}</td>
                    <td><span class="hotkey"><kbd>X</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{{t 'Reply to message' }}</td>
                    <td><span class="hotkey"><kbd>Enter</kbd> or <kbd>R</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{{t 'Quote and reply to message' }}</td>
                    <td><span class="hotkey"><kbd>></kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{{t 'Reply directly to sender' }}</td>
                    <td><span class="hotkey"><kbd>Shift</kbd> + <kbd>R</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{{t 'Reply @-mentioning sender' }}</td>
                    <td><span class="hotkey"><kbd>@</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{{t 'Send message' }}</td>
                    <td><span class="hotkey"><span class="small_hotkey"><kbd>Tab</kbd> then <kbd>Enter</kbd> or <kbd>Ctrl</kbd> + <kbd>Enter</kbd></span></span></td>
                </tr>
                <tr>
                    <td class="definition">{{t 'Insert new line' }}</td>
                    <td><span class="hotkey"><kbd>Shift</kbd> + <kbd>Enter</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{{t 'Cancel compose and save draft' }}</td>
                    <td><span class="hotkey"><kbd>Esc</kbd> or <kbd>Ctrl</kbd> + <kbd>[</kbd></span></td>
                </tr>
            </table>
        </div>
        <div>
            <table class="hotkeys_table table table-striped table-bordered">
                <thead>
                    <tr>
                        <th colspan="2">{{t 'Narrowing' }}</th>
                    </tr>
                </thead>
                <tr>
                    <td class="definition">{{t 'Narrow to topic or DM conversation' }}</td>
                    <td><span class="hotkey"><kbd>S</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{{t 'Narrow to stream from topic view' }}</td>
                    <td><span class="hotkey"><kbd>S</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{{t 'Narrow to all direct messages' }}</td>
                    <td><span class="hotkey"><kbd>Shift</kbd> + <kbd>P</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{{t 'Zoom to message in conversation context' }}</td>
                    <td><span class="hotkey"><kbd>Z</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{{t 'Narrow to next unread topic' }}</td>
                    <td><span class="hotkey"><kbd>N</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{{t 'Narrow to next unread direct message' }}</td>
                    <td><span class="hotkey"><kbd>P</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{{t 'Cycle between stream narrows' }}</td>
                    <td><span class="hotkey"><kbd>Shift</kbd> + <kbd>A</kbd> or <kbd>Shift</kbd> + <kbd>D</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{{t 'Narrow to all unmuted messages' }}</td>
                    <td><span class="hotkey"><kbd>A</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{{t 'Narrow to current compose box recipient' }}</td>
                    <td><span class="hotkey"><kbd>Ctrl</kbd> + <kbd>.</kbd></span></td>
                </tr>
            </table>
        </div>
        <div>
            <table class="hotkeys_table table table-striped table-bordered">
                <thead>
                    <tr>
                        <th colspan="2">{{t 'Message actions' }}</th>
                    </tr>
                </thead>
                <tr>
                    <td class="definition">{{t 'Edit your last message' }}</td>
                    <td><span class="hotkey"><kbd class="arrow-key">←</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{{t "Show message sender's user card"   }}</td>
                    <td><span class="hotkey"><kbd>U</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{{t 'Show images in thread' }}</td>
                    <td><span class="hotkey"><kbd>V</kbd></span></td>
                </tr>
                <tr id="edit-message-hotkey-help">
                    <td class="definition">{{t 'Edit selected message or view source' }}</td>
                    <td><span class="hotkey"><kbd>E</kbd></span></td>
                </tr>
                <tr id="move-message-hotkey-help">
                    <td class="definition">{{t 'Move messages or topic' }}</td>
                    <td><span class="hotkey"><kbd>M</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{{t 'View edit and move history' }}</td>
                    <td><span class="hotkey"><kbd>Shift</kbd> + <kbd>H</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{{t 'Star selected message' }}</td>
                    <td><span class="hotkey"><kbd>Ctrl</kbd> + <kbd>S</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">
                        {{t 'React to selected message with' }}
                        <img alt=":thumbs_up:"
                          class="emoji"
                          src="../../static/generated/emoji/images/emoji/unicode/1f44d.png"
                          title=":thumbs_up:"/>
                    </td>
                    <td><span class="hotkey"><kbd>+</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{{t 'Toggle first emoji reaction on selected message' }}</td>
                    <td><span class="hotkey"><kbd>=</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{{t 'Mark as unread from selected message' }}</td>
                    <td><span class="hotkey"><kbd>Shift</kbd> + <kbd>U</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{{t 'Collapse/show selected message' }}</td>
                    <td><span class="hotkey"><kbd>-</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{{t 'Toggle topic mute' }}</td>
                    <td><span class="hotkey"><kbd>Shift</kbd> + <kbd>M</kbd></span></td>
                </tr>
            </table>
        </div>
        <div>
            <table class="hotkeys_table table table-striped table-bordered">
                <thead>
                    <tr>
                        <th colspan="2">{{t 'Recent conversations' }}</th>
                    </tr>
                </thead>
                <tr>
                    <td class="definition">{{t 'View recent conversations' }}</td>
                    <td><span class="hotkey"><kbd>T</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{{t 'Filter topics' }}</td>
                    <td><span class="hotkey"><kbd>T</kbd></span></td>
                </tr>
            </table>
        </div>
        <div>
            <table class="hotkeys_table table table-striped table-bordered">
                <thead>
                    <tr>
                        <th colspan="2">{{t 'Drafts' }}</th>
                    </tr>
                </thead>
                <tr>
                    <td class="definition">{{t 'View drafts' }}</td>
                    <td><span class="hotkey"><kbd>D</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{{t 'Edit selected draft' }}</td>
                    <td><span class="hotkey"><kbd>Enter</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{{t 'Delete selected draft' }}</td>
                    <td><span class="hotkey"><kbd>Backspace</kbd></span></td>
                </tr>
            </table>
        </div>
        <div>
            <table class="hotkeys_table table table-striped table-bordered">
                <thead>
                    <tr>
                        <th colspan="2">{{t 'Menus' }}</th>
                    </tr>
                </thead>
                <tr>
                    <td class="definition">{{t 'Toggle the gear menu' }}</td>
                    <td><span class="hotkey"><kbd>G</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{{t 'Open personal menu' }}</td>
                    <td><span class="hotkey"><kbd>G</kbd><kbd class="arrow-key">→</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{{t 'Open help menu' }}</td>
                    <td><span class="hotkey"><kbd>G</kbd><kbd class="arrow-key">←</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{{t 'Open message menu' }}</td>
                    <td><span class="hotkey"><kbd>I</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{{t 'Open reactions menu' }}</td>
                    <td><span class="hotkey"><kbd>:</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{{t 'Show keyboard shortcuts' }}</td>
                    <td><span class="hotkey"><kbd>?</kbd></span></td>
                </tr>
            </table>
        </div>
        <div>
            <table class="hotkeys_table table table-striped table-bordered">
                <thead>
                    <tr>
                        <th colspan="2">{{t 'Stream settings' }}</th>
                    </tr>
                </thead>
                <tr>
                    <td class="definition">{{t 'Scroll through streams' }}</td>
                    <td><span class="hotkey"><kbd class="arrow-key">↑</kbd> or <kbd class="arrow-key">↓</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{{t 'Switch between tabs' }}</td>
                    <td><span class="hotkey"><kbd class="arrow-key">←</kbd> or <kbd class="arrow-key">→</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{{t 'View stream messages' }}</td>
                    <td><span class="hotkey"><kbd>Shift</kbd> + <kbd>V</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{{t 'Subscribe to/unsubscribe from selected stream' }}</td>
                    <td><span class="hotkey"><kbd>Shift</kbd> + <kbd>S</kbd></span></td>
                </tr>
                <tr>
                    <td class="definition">{{t 'Create new stream' }}</td>
                    <td><span class="hotkey"><kbd>N</kbd></span></td>
                </tr>
            </table>
        </div>
        <hr />
        <a href="/help/keyboard-shortcuts" target="_blank" rel="noopener noreferrer">{{t 'Detailed keyboard shortcuts documentation' }}</a>
    </div>
</div>
